<template>
  <el-dialog
    class='new-el-dialog'
    :title="title"
    :width="width"
    :visible.sync="showDialog"
    @close='closeDialog'
    :close-on-click-modal='false'
    :close-on-press-escape='false'>
    <slot></slot>
    <!-- 操作栏 -->
    <div slot="footer" v-if='useFooter'>
      <slot name='footer' v-if='customFooter'></slot>
      <div class='footer-handle' v-if='!customFooter'>
        <newElButton
          width='90px'
          btnType='cancel'
          @handleClick='handleCancel()'>
          {{cancelText}}
        </newElButton>
        <newElButton
          width='90px'
          class='ml16'
          @handleClick='handleConfirm()'>
          {{confirmText}}
        </newElButton>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import newElButton from '@/components/elUI/newElButton'
export default {
  name: 'newDialog',
  data () {
    return {
      showDialog: false
    }
  },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    width: {
      type: String,
      default: '757px'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    // 是否自定义弹框的底部
    customFooter: {
      type: Boolean,
      default: false
    },
    // 是否显示弹框的底部
    useFooter: {
      type: Boolean,
      default: true
    }
  },
  components: {
    newElButton
  },
  methods: {
    closeDialog () {
      this.$emit('close')
    },
    handleCancel () {
      this.$emit('cancel')
    },
    handleConfirm () {
      this.$emit('confirm')
    }
  },
  created () {
    setTimeout(() => {
      this.showDialog = true
    }, 0)
  }
}
</script>

<style lang="stylus" scoped>
.new-el-dialog
  >>> .el-dialog
    width 757px
    border-radius 6px
    display flex
    flex-direction column
    min-width auto
  >>> .el-dialog__header
    padding 16px
    font-size: 16px;
    color: #22242F;
    border-bottom 1px solid #ECEDF2
    font-weight 600
    letter-spacing 0.5px
  >>> .el-dialog__headerbtn
    top 15px
    font-size 18px
  >>> .el-dialog__title
    font-size 14px
  >>> .el-dialog__body
    flex 1
    height 0
    padding 0
  >>> .el-dialog__footer
    flex none
    // height 60px
    display flex
    justify-content flex-end
    align-items center
    padding 16px
    border-top 1px solid #ECEDF2
</style>
